<template>
  <div class="user">
    <header>
      <van-uploader v-model="fileList" max-count="1" />
      <section>
        <h3 v-if="!token" @click="$router.push('/login')">立即登录</h3>
        <p>积分：{{ 20 }}</p>
        <button v-if="token">退出登录</button>
      </section>
    </header>
    <van-notice-bar
      left-icon="volume-o"
      text="你与秋风皆过客，我携秋水揽星河，星光不问赶路人，时光不负有心人。只言温暖，莫问伤悲！"
    />
    <van-cell is-link>
      <template #title>
        <i class="iconfont icon-dingdan"></i>
        <span style="vertical-align: text-bottom">订单</span>
      </template>
    </van-cell>
    <van-grid :border="false">
      <van-grid-item>
        <i class="iconfont icon-daifukuan"></i>
        <span>待付款</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-daifahuo"></i>
        <span>待发货</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-daishouhuo01"></i>
        <span>待收货</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-31daipingjia"></i>
        <span>待评价</span>
      </van-grid-item>
    </van-grid>
    <van-grid :border="false" :column-num="3" class="icon-count">
      <van-grid-item>
        <i class="iconfont icon-yue" style="color: #f86650"></i>
        <span>我的余额</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-kanjia2" style="color: #f86650"></i>
        <span>我的砍价</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-liquan" style="color: #edb449"></i>
        <span>我的礼券</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-shoucang" style="color: #edb449"></i>
        <span>我的收藏</span>
      </van-grid-item>
      <van-grid-item @click="$router.push('/address')">
        <i class="iconfont icon-dizhi" style="color: #5a9fec"></i>
        <span>我的地址</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-lianxikefu" style="color: #5a9fec"></i>
        <span>联系客服</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      fileList: [{ url: "https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg" }],
    };
  },
  computed: {
    ...mapState(["token"]),
  },
};
</script>
<style lang="scss" scoped>
.user {
  header {
    height: 155px;
    background: #c1b18f;
    display: flex;
    align-items: center;
    padding: 20px;
  }
  section {
    margin-left: 10px;
    color: #fff;
    h3 {
      height: 36px;
      line-height: 36px;
    }
    p {
      background: #b3a078;
      font-size: 12px;
      border-radius: 5px;
      padding: 10px;
      margin: 10px 0;
    }
    button {
      border: none;
      background: transparent;
      font-size: 12px;
    }
  }
  :deep(.van-image__img) {
    border-radius: 50%;
  }
  :deep(.van-uploader__preview-delete) {
    border-radius: 50%;
    top: -5px;
    .van-uploader__preview-delete-icon {
      top: 1px;
      right: 1px;
    }
  }
  .van-cell {
    margin-top: 10px;
  }
  .icon-dingdan {
    color: #f7b94b;
    font-size: 19px;
    margin-right: 10px;
  }
  .van-grid-item {
    font-size: 14px;
    color: #6d6d6d;
    i {
      font-size: 28px;
      margin-bottom: 5px;
    }
  }
  .icon-count {
    margin-top: 15px;
    .van-grid-item {
      color: #000;
    }
  }
}
</style>
